{% extends "admin/base_site.html" %}
{% load i18n static %}

{% block title %}测试登录页面{% endblock %}

{% block extrastyle %}{{ block.super }}
<style>
/* 重置所有默认样式 */
* {
    box-sizing: border-box;
}

/* 强制覆盖body样式 */
html, body {
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
    font-family: 'Microsoft YaHei', Arial, sans-serif !important;
}

/* 隐藏Django默认的admin元素 */
#container, #header, #branding, #footer, #nav-sidebar {
    display: none !important;
}

/* 登录容器 */
.login-wrapper {
    min-height: 100vh !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px !important;
}

.login-box {
    background: white !important;
    padding: 40px !important;
    border-radius: 15px !important;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2) !important;
    width: 100% !important;
    max-width: 400px !important;
    margin: 0 auto !important;
}

.login-title {
    text-align: center !important;
    margin-bottom: 30px !important;
    color: #333 !important;
    font-size: 24px !important;
    font-weight: bold !important;
}

.form-field {
    margin-bottom: 20px !important;
}

.form-field label {
    display: block !important;
    margin-bottom: 8px !important;
    color: #555 !important;
    font-weight: bold !important;
}

.form-field input[type="text"],
.form-field input[type="password"] {
    width: 100% !important;
    padding: 12px !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    font-size: 16px !important;
}

.form-field input[type="text"]:focus,
.form-field input[type="password"]:focus {
    outline: none !important;
    border-color: #667eea !important;
}

.submit-button {
    width: 100% !important;
    padding: 15px !important;
    background: linear-gradient(135deg, #667eea, #764ba2) !important;
    color: white !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
}

.submit-button:hover {
    opacity: 0.9 !important;
}

.error-message {
    background: #ffebee !important;
    color: #c62828 !important;
    padding: 10px !important;
    border-radius: 5px !important;
    margin-bottom: 20px !important;
}
</style>
{% endblock %}

{% block nav-global %}{% endblock %}

{% block content %}
<div class="login-wrapper">
    <div class="login-box">
        <h1 class="login-title">🔐 管理员登录</h1>

        {% if form.errors %}
            <div class="error-message">
                登录失败，请检查用户名和密码
            </div>
        {% endif %}

        <form method="post" action="{{ app_path }}">
            {% csrf_token %}

            <div class="form-field">
                <label for="{{ form.username.id_for_label }}">用户名:</label>
                {{ form.username }}
            </div>

            <div class="form-field">
                <label for="{{ form.password.id_for_label }}">密码:</label>
                {{ form.password }}
            </div>

            <input type="submit" value="登录" class="submit-button" />
            <input type="hidden" name="next" value="{{ next }}" />
        </form>
    </div>
</div>
{% endblock %}
